<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="shollin">
    <title>代码生成工具</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">数据库驱动</label>
                <div class="layui-input-block">
                    <el-input v-model="db.driver"></el-input>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">主机IP</label>
                <div class="layui-input-block">
                    <el-input v-model="db.host"></el-input>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">端口</label>
                <div class="layui-input-block">
                    <el-input v-model="db.port"></el-input>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">数据库名</label>
                <div class="layui-input-block">
                    <el-input v-model="db.dbname"></el-input>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <el-input v-model="db.username"></el-input>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-form-item">
                <label class="layui-form-label">数据库密码</label>
                <div class="layui-input-block">
                    <el-input type="password" v-model="db.password" placeholder="数据库密码"></el-input>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row ">
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <el-button type="primary" size="mini" @click="connect" :disabled="!connectBtnEnabled">连接数据库</el-button>
                    <span style="color: #ff0114;font-weight: bold; padding-left: 20px;">*{{msg}}*</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <el-input v-model="packageName" size="mini" style="width: 300px"></el-input>
            <el-button type="primary" size="mini" @click="config">配置</el-button>
        </div>
    </div>
    <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
        <el-table-column
                prop="tableName"
                label="表名称"
                width="180">
        </el-table-column>
        <el-table-column
                label="实体类名称"
                width="180">
            <template slot-scope="scope">
                <el-input v-model="scope.row.modelName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="Mapper名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.mapperName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="Service名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.serviceName"></el-input>
            </template>
        </el-table-column>
        <el-table-column
                label="Controller名称">
            <template slot-scope="scope">
                <el-input v-model="scope.row.controllerName"></el-input>
            </template>
        </el-table-column>
    </el-table>
    <div>
        <el-button @click="generateCode" type="success">生成代码</el-button>
        <div style="color: #ff0114;font-weight: bold">*{{result}}*</div>
        <div>{{codePath}}</div>
    </div>

</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [],
                result: 'waiting',
                codePath: '',
                packageName: 'com.zxp.springboot',
                msg: '数据库未连接',
                connectBtnEnabled: true,
                db: {
                    driver: "com.mysql.cj.jdbc.Driver",
                    host: "localhost",
                    port: 3306,
                    dbname: "",
                    username: "root",
                    password: "123456"
                }
            }
        },
        methods: {
            generateCode() {
                let _this = this;
                axios.post('/generateCode', this.tableData)
                    .then(function (response) {
                        console.log(response);
                        _this.result = response.data.msg;
                        _this.codePath = response.data.data;
                    })
                    .catch(function (error) {
                    });
            },
            config() {
                let _this = this;
                axios.post('/config', {packageName: this.packageName})
                    .then(function (response) {
                        console.log(response);
                        _this.msg = response.data.msg;
                        _this.tableData = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            connect() {
                let _this = this;
                axios.post('/connect', this.db)
                    .then(function (response) {
                        console.log(response);
                        _this.msg = response.data.msg;
                        _this.connectBtnEnabled = true;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>

</body>
</html>